<template>
  <el-card>
    <div class="sales__header">
      <el-tabs v-model="activeTab">
        <el-tab-pane label="销售额" name="sales"></el-tab-pane>
        <el-tab-pane label="访问量" name="visited"></el-tab-pane>
      </el-tabs>

      <div class="sales__header-date">
        <el-radio-group v-model="selectedDate" class="mr-10">
          <!-- label：选中的value值 -->
          <el-radio-button label="day">今日</el-radio-button>
          <el-radio-button label="week">本周</el-radio-button>
          <el-radio-button label="month">本月</el-radio-button>
          <el-radio-button label="year">今年</el-radio-button>
        </el-radio-group>

        <el-date-picker
          v-model="date"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
        />
      </div>
    </div>
    <el-row :gutter="10">
      <el-col :xs="24" :sm="17">
        <SalesChart
          :data="activeTab === 'sales' ? orderFullYear : userFullYear"
          :axis="activeTab === 'sales' ? orderFullYearAxis : userFullYearAxis"
          :title="activeTab === 'sales' ? '销售趋势' : '访问量趋势'"
      /></el-col>
      <el-col :xs="24" :sm="7">xxx</el-col>
    </el-row>
  </el-card>
</template>

<script lang="ts">
export default {
  name: "SalesVisited",
};
</script>

<script lang="ts" setup>
import { ref, watch } from "vue";
import dayjs from "dayjs";
import SalesChart from "./SalesChart.vue";

const props = defineProps<{
  orderFullYearAxis: string[];
  orderFullYear: number[];
  userFullYearAxis: string[];
  userFullYear: number[];
}>();

// tab切换
const activeTab = ref("sales");

// 单选
const selectedDate = ref();
// 日期选择器的数据
const date = ref();

watch(selectedDate, (selectedDate) => {
  let start, end;

  switch (selectedDate) {
    case "day":
      // dayjs() 得到当前时间的日期对象
      // format("YYYY-MM-DD") 将日期对象格式化输出成字符串
      start = dayjs().format("YYYY-MM-DD");
      end = start;
      break;
    case "week":
      // startOf("week") 一周的开始
      // .add(1, "day") 加1天
      start = dayjs().startOf("week").add(1, "day").format("YYYY-MM-DD");
      end = dayjs().endOf("week").add(1, "day").format("YYYY-MM-DD");
      break;
    case "month":
      start = dayjs().startOf("month").format("YYYY-MM-DD");
      end = dayjs().endOf("month").format("YYYY-MM-DD");
      break;
    case "year":
      start = dayjs().startOf("year").format("YYYY-MM-DD");
      end = dayjs().endOf("year").format("YYYY-MM-DD");
      break;
  }

  date.value = [start, end];
});
</script>

<style scoped>
.sales__header {
  position: relative;
}

.sales__header-date {
  position: absolute;
  right: 0;
  top: -10px;
  height: 40px;
  display: flex;
  align-items: center;
}

:deep(.el-tabs__item) {
  height: 40px;
  line-height: inherit;
  padding: 0 20px !important;
}
:deep(.el-tabs__active-bar) {
  width: 80px !important;
  left: -20px;
}

@media only screen and (max-width: 900px) {
  .sales__header-date {
    display: none;
  }
}
</style>
